<template>
	<div class="marketingPosterList">
		<el-card shadow="hover">
			<div class="marketing-poster-list mb15">
				<el-form ref="formDataRef" :inline="true" :model="searchForm" label-width="120px" class="demo-form-inline">
					<el-row>
						<el-col :span="6">
							<el-form-item label="关键词" prop="keyword" style="width: 100%">
								<el-input show-word-limit maxlength="200" v-model="searchForm.keyword" placeholder="关键词" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="页面位置" prop="positionId" style="width: 100%">
								<PositionSelector v-model="searchForm.positionId" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="广告主体类型" prop="type" style="width: 100%">
								<el-select v-model="searchForm.type" clearable style="width: 100%">
									<el-option v-for="(item, index) in adMainTypeOptions" :key="index" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6" style="padding-left: 10px">
							<el-form-item>
								<div>
									<el-button type="primary" @click="init">搜索</el-button>
									<el-button @click="resetForm">重置</el-button>
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-button type="success" @click="toAdd">新增广告位</el-button>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<el-table :data="tableData" style="width: 100%" v-loading="loading">
				<el-table-column type="index" label="序号" width="50">
					<template #default="scope">
						<span>{{ scope.$index + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="positionId" label="位置" show-overflow-tooltip>
					<template #default="scope">
						<span>{{ $filters.positionFormat(scope.row.positionId) }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="type" label="类型" show-overflow-tooltip>
					<template #default="scope">
						<span>{{ $filters.adMainTypeFormat(scope.row.type) }}</span>
					</template>
				</el-table-column>
				<el-table-column label="PC端图片">
					<template #default="scope">
						<Img v-if="scope.row.type !== 5" :src="scope.row.pcPic" height="50px" width="50px" />
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column label="移动端图片">
					<template #default="scope">
						<Img v-if="scope.row.type !== 5" :src="scope.row.mobilePic" height="50px" width="50px" />
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column prop="title" label="标题" show-overflow-tooltip />
				<el-table-column label="开始时间" show-overflow-tooltip>
					<template #default="scope">
						<span>{{ $filters.timeFormat(scope.row.startTime) }}</span>
					</template>
				</el-table-column>
				<el-table-column label="结束时间" show-overflow-tooltip>
					<template #default="scope">
						<span>{{ $filters.timeFormat(scope.row.endTime) }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="sort" label="排序" show-overflow-tooltip />
				<el-table-column label="状态" show-overflow-tooltip>
					<template #default="scope">
						<MySwitch v-model="scope.row.status" @change="changeStatus(scope.row)" />
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="60px">
					<template #default="scope">
						<el-button text @click="toEdit(scope.row)" type="primary">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				v-model:current-page="page.current"
				background
				v-model:page-size="page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="page.total"
			>
			</el-pagination>
		</el-card>
		<saveDialog v-model="addDialogVisible" :isAdd="isAdd" :editItem="editItem" :positionList="positionList" @refresh="init" />
		<DotDialog v-model="dotDialogVisible" :editItem="editItem" @refresh="init" />
	</div>
</template>
<script setup name="MarketingPosterList">
import { useInit, useEdit } from './hook';
import saveDialog from './saveDialog.vue';
import DotDialog from './dot/DotDialog.vue';
import PositionSelector from '/@/components/common/positionSelector/PositionSelector.vue';

const formDataRef = ref();

const resetForm = () => {
	formDataRef.value.resetFields();
};

const { page, adMainTypeOptions, searchForm, loading, tableData, init } = useInit();
const { isAdd, addDialogVisible, dotDialogVisible, editItem, positionList, changeStatus, toAdd, toEdit } = useEdit(init);

// 分页改变
const onHandleSizeChange = (val) => {
	page.value.pageSize = val;
	init();
};
// 分页改变
const onHandleCurrentChange = (val) => {
	page.value.current = val;
	init();
};
</script>
<style lang="scss" scoped></style>
